<template>
  <div class="app-container">
    <!-- 左侧对话列表 -->
    <aside class="sidebar">
      <div class="sidebar-header">对话列表</div>
      <ul class="chat-list">
        <li
          v-for="(chat, index) in chats"
          :key="chat.id"
          :class="{ active: currentChatIndex === index }"
          @click="switchChat(index)"
        >
          {{ chat.title || '新对话' }}
        </li>
      </ul>
      <button class="new-chat-btn" @click="newChat">＋ 新对话</button>
    </aside>

    <!-- 右侧聊天主区域 -->
    <main class="chat-main">
      <header class="chat-header">
        <h2>{{ currentChat.title || '新对话' }}</h2>
      </header>

      <section class="chat-messages" ref="chatMessages">
        <div
          v-for="(msg, idx) in currentChat.messages"
          :key="idx"
          :class="['message-bubble', msg.role === 'user' ? 'user' : 'assistant']"
        >
          <pre>{{ msg.content }}</pre>
        </div>
      </section>

      <footer class="chat-input-area">
        <textarea
          v-model="userInput"
          @keyup.enter.exact.prevent="sendMessage"
          placeholder="请输入消息，按 Enter 发送"
          rows="1"
          ref="input"
        ></textarea>
        <button @click="sendMessage" :disabled="!userInput.trim()">发送</button>
      </footer>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInput: '',
      chats: [
        {
          id: 1,
          title: '欢迎使用 Ollama Chat',
          messages: [
            {
              role: 'system',
              content:
                '你是一个友好且知识丰富的助手，请简洁明了地回答用户问题。'
            }
          ]
        }
      ],
      currentChatIndex: 0
    }
  },
  computed: {
    currentChat() {
      return this.chats[this.currentChatIndex]
    }
  },
  methods: {
    async sendMessage() {
      const question = this.userInput.trim()
      if (!question) return

      // 添加用户消息
      this.currentChat.messages.push({ role: 'user', content: question })
      this.userInput = ''

      this.$nextTick(() => {
        this.scrollToBottom()
      })

      // 调用 Ollama 接口
      try {
        const res = await fetch('http://localhost:11434/api/chat', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            model: 'llama3',
            stream: false,
            messages: this.currentChat.messages
          })
        })

        const data = await res.json()
        if (data.message && data.message.content) {
          this.currentChat.messages.push({
            role: 'assistant',
            content: data.message.content
          })
          this.$nextTick(() => {
            this.scrollToBottom()
          })
        }
      } catch (e) {
        this.currentChat.messages.push({
          role: 'assistant',
          content: '❌ 连接失败，请确认 Ollama 已启动'
        })
      }
    },
    scrollToBottom() {
      const container = this.$refs.chatMessages
      container.scrollTop = container.scrollHeight
    },
    switchChat(index) {
      this.currentChatIndex = index
      this.userInput = ''
      this.$nextTick(() => {
        this.scrollToBottom()
      })
    },
    newChat() {
      const newId = Date.now()
      this.chats.push({
        id: newId,
        title: '',
        messages: [
          {
            role: 'system',
            content:
              '你是一个友好且知识丰富的助手，请简洁明了地回答用户问题。'
          }
        ]
      })
      this.currentChatIndex = this.chats.length - 1
      this.userInput = ''
    }
  }
}
</script>

<style scoped>
/* 容器分为左右两栏 */
.app-container {
    display: flex;
    height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: #202123;
    color: #e6e6e6;
}

/* 左侧侧边栏 */
.sidebar {
    width: 280px;
    background: #2a2b32;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #444651;
}

.sidebar-header {
    font-weight: 700;
    font-size: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid #444651;
    user-select: none;
}

.chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    list-style: none;
    margin: 0;
}

.chat-list li {
    padding: 12px 20px;
    cursor: pointer;
    border-radius: 8px;
    margin: 4px 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: background-color 0.15s ease-in-out;
}

.chat-list li:hover {
    background-color: #444651;
}

.chat-list li.active {
    background-color: #4caf50;
    color: white;
    font-weight: 600;
}

.new-chat-btn {
    background-color: #4caf50;
    border: none;
    padding: 14px;
    font-weight: 700;
    cursor: pointer;
    color: white;
    margin: 16px;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.new-chat-btn:hover {
    background-color: #388e3c;
}

/* 右侧聊天区域 */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #343541;
}

/* 聊天头部 */
.chat-header {
    padding: 20px;
    font-size: 22px;
    font-weight: 700;
    border-bottom: 1px solid #444651;
    user-select: none;
    color: white;
}

/* 聊天消息区 */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #343541;
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

/* 消息气泡 */
.message-bubble {
    max-width: 70%;
    margin-bottom: 16px;
    padding: 14px 20px;
    border-radius: 20px;
    line-height: 1.4;
    white-space: pre-wrap;
    user-select: text;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
}

.message-bubble.user {
    background: #4caf50;
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.message-bubble.assistant {
    background: #444654;
    color: #e6e6e6;
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

/* 底部输入区域 */
.chat-input-area {
    display: flex;
    padding: 12px 20px;
    border-top: 1px solid #444651;
    background: #202123;
    align-items: center;
}

.chat-input-area textarea {
    flex: 1;
    resize: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    background: #343541;
    color: #e6e6e6;
    border: 1px solid #555960;
    outline: none;
    max-height: 120px;
    transition: border-color 0.2s ease;
}

.chat-input-area textarea:focus {
    border-color: #4caf50;
}

.chat-input-area button {
    margin-left: 12px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 16px;
    background: #4caf50;
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.chat-input-area button:disabled {
    background: #6fbf73;
    cursor: not-allowed;
}

.chat-input-area button:hover:not(:disabled) {
    background: #388e3c;
}
</style>
